<template>
  <el-collapse-transition>
    <div v-show="queryModel&&searchShow" class="search  transition-box mar_bottom_10 ">
      <el-card class="box-card">
        <el-form ref="searchFrom" :inline="true" :model="queryModel" class="demo-form-inline">
          <slot v-if="queryModel" name="search_from_input" />
          <el-form-item v-if="queryModel">
            <el-button class="pan-btn light-blue-btn" @click="search">查询</el-button>
            <el-button class="pan-btn pink-btn" @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </el-collapse-transition>
</template>

<script>
export default {
  name: 'Search',
  props: {
    searchShow: { type: Boolean, default: true },
    queryModel: { type: Object, default: () => {} }
  },
  methods: {
    search() {
      this.$emit('onSearch', this.queryModel)
    },
    resetForm() {
      this.$refs['searchFrom'].resetFields()
      this.$emit('onResetForm', this.$refs['searchFrom'])
    }
  }

}
</script>
